<template>
  <div>
    <el-form :model="curFrom"  ref="addrForm">
      <el-form-item label="发票类型" :label-width="formLabelWidth" >
        单位
      </el-form-item>
      <el-form-item label="发票抬头" placeholder="输入发票抬头" :label-width="formLabelWidth" >
        <el-input v-model="curFrom.title" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="纳税人识别号" placeholder="输入纳税人识别号" :label-width="formLabelWidth" v-if="curFrom.type === 1">
        <el-input v-model="curFrom.eleCode" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" >
      <el-button @click="closeForm(curFrom.id)">取 消</el-button>
      <el-button type="primary" :disabled="submitDisable" @click="submitForm('addrForm', curFrom.id)">确 定</el-button>
    </div>
  </div>
</template>

<script>
import {Button, Form, FormItem, Input, Select, Option} from 'element-ui'
export default {
  name: 'invoiceForm',
  components: {
    elButton: Button,
    elForm: Form,
    elFormItem: FormItem,
    elInput: Input,
    elSelect: Select,
    elOption: Option
  },
  props: {
    modform: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      formLabelWidth: '100px',
      curFrom: {
        type: 1
      },
      submitDisable: false,
      types: [
        {
          value: 0,
          label: '个人'
        },
        {
          value: 1,
          label: '单位'
        }
      ]
    }
  },
  methods: {
    initData (data) {
      let clonedata = JSON.parse(JSON.stringify(data))
      if (!clonedata.id) {
        this.curFrom = { type: 1 }
      } else {
        this.curFrom = clonedata
      }
    },
    closeForm () {
      this.$emit('close-dialog')
    },
    // 发票
    checkInvoice () {
      if (this.curFrom.type === 1 && this.curFrom.eleCode && this.curFrom.title) {
        return true
      } else {
        this.$message.error({
          message: '请填写完整填写发票信息'
        })
        return false
      }
    },
    submitForm () {
      const result = this.checkInvoice() // 验证
      if (result) {
        this.submitDisable = true
        // 触发请求
        this.$store.dispatch('modInvoice', this.curFrom).then((res, rej) => {
          this.$emit('close-dialog')
          this.$emit('get-Invoice', this.curFrom, res)
          this.submitDisable = false
        })
      }
    }
  },
  mounted () {
    this.initData(this.modform)
  },
  watch: {
    modform (val, old) {
      this.initData(val)
    }
  }
}
</script>

<style lang="scss" scoped>
  .dialog-footer{
    text-align: center;
  }
</style>
